<template>
	<view class="recommendContainer">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true" class="banner">
			<swiper-item>
				<image src="../../static/images/carts/emptyCart.gif" ></image>
			</swiper-item>
		</swiper>
		<!-- 政策信息 -->
		<view class="policyDescList">
			<view class="policyDescItem" v-for="(policyItem,index) in policyDescList" :key="index">
				<image :src="policyItem.icon" ></image>
				<text>{{policyItem.desc}}</text>
			</view>
		</view>
		<!-- 导航菜单 -->
		<view class="kingKongList">
			<view class="kingKongItem" v-for="(kingKongItem,index) in kingKongList" :key="index">
				<image :src="kingKongItem.picUrl" ></image>
				<text>{{kingKongItem.text}}</text>
			</view>
		</view>
		<!-- 图片和滑块 -->
		<!-- 此处定义的组件 -->
		<category />
	</view>
</template>

<script>
	import {mapGetters} from "vuex"
	import category from "../category/category.vue"
	export default{
		name:"",
		components:{
			category
		},
		computed:{
			...mapGetters(['policyDescList','kingKongList'])
		}
	}
</script>

<style lang="stylus">
.recommendContainer
	margin-top 10upx
	.banner
		width 100%
		height 350upx
		image
			width 100%
			height 100%
	.policyDescList
		display flex
		margin-top 10upx
		.policyDescItem
			flex 1
			text-align center
			image
				width 32upx
				height 32upx
			text
				font-size 28upx
				vertical-align top
	.kingKongList
		margin-top 10upx
		display flex
		flex-wrap wrap
		.kingKongItem
			width 20%
			display flex
			flex-direction column
			align-items center
			margin-top 10upx
			image
				width 110upx
				height 110upx
				border-radius 20upx
			text
				font-size 26upx
</style>
